<template>
  <div class="city">
    <div class="top">
      <!-- 搜索框 -->
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
        @cancel="cancelClick"
      />
      <!-- tab栏 -->
      <van-tabs v-model:active="tabActive" color="#ff9854">
        <template v-for="(value, key, index) in cityAll" key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>

    <!-- 城市分组 -->
    <div class="bottom">
     <city-group :groupData="currentGroup"/>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue"
import { useRouter } from "vue-router"

let searchValue = ref("")
// 获取点击的 状态
let tabActive = ref()

const router = useRouter()
const cancelClick = () => {
  router.back()
}

// 从store中获取 city 数据
import { useCityStore } from "@/stores/modules/city"
import { storeToRefs } from "pinia"
const cityStore = useCityStore()
// 调用网络请求
cityStore.fetchCityData()
const { cityAll } = storeToRefs(cityStore)

import cityGroup from "./cpns/city-group.vue"
// 根据点击的 tab栏 来展示内容
// 1.获取正确的key: 将tabs中绑定的tabAction通过name正确绑定到 对于的 key值
// 2.根据key从allCities获取数据, 默认直接获取的数据不是响应式的, 所以必须包裹computed
const currentGroup = computed(() => cityAll.value[tabActive.value])

</script>

<style lang="less" scoped>
.city {
  
  // 方案一：
  // .top {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  // }
  // .buttom {
  //   height: 100px;
  // }

  // 方案二
  .top {
    position: relative;
    z-index: 9;
  }

  // 布局滚动
  .bottom {
    height: calc(100vh - 98px);
    overflow-y: scroll;
  }
}
</style>
